// 客户端 io 处理
// 建立连接
const socket = io();

const user = {
  userId: localStorage.getItem('userid'),
  username: localStorage.getItem('username'),
  avator: localStorage.getItem('avator')
};
let toUser;

// 通知服务器端 我上线了
socket.emit('online', user);

// 接受服务端返回的所有在线用户
socket.on('client-online', data => {
  console.log('所有用户：', data);
  renderUserList(data);
});

// 监听消息
socket.on('client-message', data => {
  renderMsg(data);
});

// 发送消息
$('.chat-send').on('click', function () {
  let text = $('.chat-content').val();

  if (text.indexOf(':') > -1) { // 说明 @
    text = text.substr(text.indexOf(':') + 1);
  }

  if (!text) {
    return alert('请输入内容后再发表');
  }

  // 触发服务端的事件
  socket.emit('message', {
    ...user,
    msg: htmlToText(text),
    toWho: toUser,
    date: new Date().getTime()
  });

  $('.chat-content').val('');
  toUser = null;
});

// 双击私信
$('.chat-body').on('dblclick', '.user-list-name', function () {
  console.log('私信用户：', $(this).text());
  toUser = $(this).text();

  $('.chat-content').val('@' + toUser + ':');
  $('.chat-content')[0].focus();
});

// 渲染用户列表
function renderUserList(data) {
  $('.chat-body').html('');

  for (var key in data) {
    let div = $(`<div class="user-list-name">${data[key].username}</div>`);
    $('.chat-body').append(div);
  }
}

// 渲染聊天
function renderMsg(data) {
  const c = (data.username == user.username) ? 'msg self clear' : 'msg clear';
  let div = `
    <div class="${c}">
      <img src="/images/head/9.jpg" alt="">
      <p>${data.msg}</p>
    </div>
  `;

  $('.chat-msg').append(div);

  // 将滚动条拉到最底部
  $('.chat-msg').scrollTop($('.chat-msg')[0].scrollHeight);
}

// 将聊天框内的文字做一次过滤，把标签转义了
function htmlToText(text) {
  return text.replace(/[<>&"]/g, c => {
    return {
      "<": "&lt;",
      ">": "&gt;",
      "&": "&amp;",
      '"': "&quot;"
    }[c]
  })
}